<template>
  <el-cascader :size="size" ref="cascader" @change="change" placeholder="请选择分类" :options="options" :value="selectedOptions" style="width: 100%;" :props="{
      value:'columnId',
      label:'columnName',
      children:'children'
    }">
  </el-cascader>
</template>
<script>
import { cateTree } from '@/utils/api'
export default {
  props: {
    clearable: {
      type: Boolean,
      default: false
    },
    size: '',
    value: Number
  },
  data() {
    return {
      options: [],
      selectedOptions: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    change(n) {
      const m = this.JSONs(n).pop()
      this.$nextTick(() => {
        if (this.value) {
          this.$refs.cascader.flatOptions.some(item => {
            const obj = this.JSONs(item).pop()
            if (this.value === obj.columnId) {
              this.$emit('getMap', obj)
              console.log(obj)
              return true
            }
          })
        }
      })
      this.$emit('input', m)
    },
    async getData() {
      this.pload = false
      const Datas = await cateTree()
      const fn = item => {
        item.forEach(item => {
          if (item.children.length) {
            fn(item.children)
          } else {
            delete item.children
          }
        })
      }
      fn(Datas)
      this.options = Datas
      this.pload = true
      this.$nextTick(() => {
        if (this.value) {
          this.$refs.cascader.flatOptions.some(item => {
            const obj = this.JSONs(item).pop()
            if (this.value === obj.columnId) {
              console.log(obj)
              this.$emit('getMap', obj)
              this.selectedOptions = item.map(i => i.columnId)
              return true
            }
          })
        }
      })
    }
  }
}
</script>